<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org" 
	xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout" layout:decorate="~{base}">

<head>
	<title>Countries</title>
</head>

<div layout:fragment="page_content" id="page_content">
	<h1 class="page-header">Countries</h1>
	<div class="row justify-content-md-center">
		<div class="col-md-6 input-group">
			<input type="text" class="filter form-control" id="search_f"
				th:value="${param.search}" name="search" placeholder="Search by name" />
			<button id="searchBtn" class="btn btn-primary btn-sm">
				<i class="fa fa-search"></i> Search</button>
		</div>
	</div>
	<br />
	<div class="row">
		<div class="col">
			<table class="table table-striped">
				<thead>
					<tr>
						<th>Continent</th>
						<th>Region</th>
					</tr>
					<tr>
						<th>
							<select class="form-control filter" id="continents_f" name="continent">
							
								<option value="">All</option>
								<option th:each="c : ${continents}" th:value="${c}"
									th:selected="${#strings.equals(c, param.continent)}">[[${c}]]</option>
							</select>
						</th>
						<th>

							<select class="form-control filter" id="regions_f" name="region">
								<option value="">All</option>
								<option th:each="r : ${regions}" th:value="${r}"
									th:selected="${#strings.equals(r, param.region)}">[[${r}]]</option>
							</select>
						</th>
					</tr>
				</thead>
			</table>
			<table class="table table-striped">
				<thead>
					<tr>
						<th>Code</th>
						<th>Name</th>
						<th>Continent</th>
						<th>Region</th>
						<th>Area</th>
					</tr>
				</thead>
				<tbody>
					<tr th:each="c : ${countries}">
						<td><a th:href="@{|/countries/${c.code}|}">[[${c.code}]]</a></td>
						<td>[[${c.name}]]</td>
						<td>[[${c.continent}]]</td>
						<td>[[${c.region}]]</td>
						<td>[[${c.surfaceArea}]]</td>
					</tr>
				</tbody>
			</table>
			<div>
				<span id="pagination" th:attr="count=${count}"></span>
			</div>
		
		</div>
	</div>
</div>
<th:block layout:fragment="scripts">
	<script th:src="@{/static/js/countries.js}"></script>
</th:block>
</html>